<section class="header">
  <h1>
    {{t "globalDnsPage.providersPage.add"}}
  </h1>
</section>

<section class="pt-10">
  <div class="row nav nav-boxes checked-active">
    {{#each availableProviders as |provider|}}
      <a
        {{action "switchProvider" provider.name}}
        alt={{provider.name}}
        class="mb-20 col span-2 nav-box-item driver generic {{if (eq provider.name activeProvider) "active"}}"
        href="#"
      >
        <div class="machine-driver {{provider.name}}"></div>
        <p>{{provider.name}}</p>
      </a>
    {{/each}}
  </div>
</section>

<hr class="mt-20 mb-20" />

{{#accordion-list as |al expandFn|}}
  {{#accordion-list-item
     title=(t "globalDnsPage.providersPage.options.title")
     detail=(t "globalDnsPage.providersPage.options.detail")
     expandAll=al.expandAll
     expand=(action expandFn)
     expandOnInit=true
     everExpanded=true
     showExpand=false
  }}
    {{partial (concat activeProvider "-dns-provider") }}
  {{/accordion-list-item}}


  {{#accordion-list-item
     title=(t "globalDnsPage.providersPage.members.title")
     detail=(t "globalDnsPage.providersPage.members.detail")
     expandAll=al.expandAll
     expand=(action expandFn)
  }}
    {{form-members-global-access
      ownerOnly=true
      readOnly=false
      resource=model
      addAuthorizedPrincipal=(action "addAuthorizedPrincipal")
      removeMember=(action "removeMember")
    }}
  {{/accordion-list-item}}

{{/accordion-list}}

<section>
  {{top-errors errors=errors}}
  {{save-cancel
    cancel="cancel"
    classNames="text-center mt-20"
    save="save"
    saveDisabled=saveDisabled
  }}
</section>
